<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表过滤</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="lie">
			<input type="text" v-model="name" placeholder="请输入名字" />
			<ul>
				<li v-for="(p,index) in filPersons" :key="index">
				{{index+1}} {{p.name}} - {{p.age}} - {{p.sex}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var lie = new Vue({
				el:"#lie",
				data:{
					name:'',
					persons:[
						{id:'01',name:'马冬梅',age:12,sex:'女'},
						{id:'02',name:'周冬雨',age:15,sex:'女'},
						{id:'03',name:'周杰伦',age:16,sex:'男'},
						{id:'04',name:'温兆伦',age:26,sex:'男'},
					],
					filPersons:[],
				},
				watch:{
					name:{
						immediate:true,
						handler(val){
							// console.info('被修改成',val);
							this.filPersons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1;
							})
						}
					}
				}
				
			})
		</script>
	</body>
</html>
